import * as React from 'react'
import * as ReactMotion from 'react-motion'
const { Motion, spring, StaggeredMotion, TransitionMotion, presets } = ReactMotion

import {r, lr, tool, View, Layer} from '../IKit/IKit'
import {Show} from './Show'

interface IProps {}
interface IState {
	open:boolean,
	x_def:number,
	x_sty:number,
}

export class MotionTest extends React.Component<IProps, IState> {
	// public state:IState
	static defaultStyle = {};
	constructor(props:IProps){
		super(props)
		this.state = {
			open: false,
			x_def:0,
			x_sty:0,
		}
	}
	componentWillMount(){}
	render(){
		let b:React.CSSProperties = {
			
		};
		let css_bg:React.CSSProperties = {
			backgroundColor: '#ddd',
			borderRadius: '0.12rem',
			width:'5rem',
			height:'1rem',
			marginLeft:'0.4rem',
			marginTop: '0.1rem',
			marginBottom: '0.1rem',
		}
		let mo:ReactMotion.MotionProps = {
			defaultStyle:{
				x:this.state.x_def
			},
			style:{
				x:spring(this.state.x_sty)
			}
		}
		let mo2:ReactMotion.MotionProps = {
			defaultStyle: {
				x:this.state.open?4:0,
			},
			style:{
				x:spring(this.state.open?0:4),
			}
		}
		function mosty(v:any) {
			let test = {aa:'aa', bb:12}
			let end:React.CSSProperties = {
				backgroundColor: '#f84',
				borderRadius: '0.12rem',
				width: '1rem',
				height: '1rem',
				WebkitTransform: `translate3d(${v.x}px, 0, 0)`,
                transform: `translate3d(${v.x}px, 0, 0)`,
				fontSize: '0.4rem',
			}
			tool.move(end, v.x, 0, 0)
			return end
		}
		let long = (
			<Motion {...mo}>
					{(v:any)=>(
						<div style={css_bg}>
							<div style={mosty(v)}>{tool.toFixed(v.x, 2)}</div>
						</div>
					)}
			</Motion>
		);
		return (
			<div>
				<button onMouseDown={this.handleMouseDown.bind(this)} onTouchStart={this.handleTouchStart.bind(this)}>
					Toggle
				</button>
				 <Motion {...mo}>
					{(v:any)=>(
						<div style={css_bg}>
							<View style={mosty(v)}>{tool.toFixed(v.x, 2)}</View>
						</div>
					)}
				</Motion>
				<Motion {...mo2}>
					{(v:any)=>(
						<div style={css_bg}>
							<div style={mosty(v)}>{tool.toFixed(v.x, 2)}</div>
						</div>
					)}
				</Motion>
			</div>
		)
	}
	componentDidMount(){}
	componentWillReceiveProps(){}
	shouldComponentUpdate(){ return true }
	componentWillUpdate(){}
	componentWillUnmount(){}
	//
	handleMouseDown(){
		this.setState({
			x_def: this.state.open?4:0,
			x_sty: this.state.open?0:4,
			open: !this.state.open,
		})
	}
	handleTouchStart(){
		this.handleMouseDown()
	}
}